import React from 'react';
import styles from './style';
//引入
import {
    Image,
    Text,
    SafeAreaView,
    View,
    FlatList,
    ScrollView,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import { getPhotosFindList } from '../../../../common/api/photosProfile';
import { defalutAvatar } from '../../../../util/constants';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { getUserInfo } from '../../../../common/api/user';
const windowWidth = Dimensions.get('window').width;
const hot = require('../../img/hot.png');
export default class Find extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            List: [],
            userInfo: {},
        };
    }

    componentDidMount() {
        this.getData();
        this.getLoginUserInfo();
    }
    getData = async () => {
        const res = await getPhotosFindList();
        this.setState({
            List: res,
        });
    };

    getLoginUserInfo = async () => {
        let userInfo = await AsyncStorage.getItem('userInfo');
        if (userInfo) {
            const parseUserInfo = JSON.parse(userInfo);
            if (parseUserInfo) {
                userInfo = parseUserInfo;
            }
        }
        userInfo = userInfo || (await getUserInfo());
        this.setState({ userInfo });
    };
    render() {
        let { navigation } = this.props;
        let { List, userInfo } = this.state;

        const _renderItem = ({ item }) => {
            const uri = { uri: item.avatar || defalutAvatar };

            return (
                <View style={{ marginTop: 15 }}>
                    <View style={[styles.titleStyle]}>
                        <View style={{ marginTop: 15 }}>
                            <TouchableOpacity
                                activeOpacity={0.6}
                                onPress={() => {
                                    console.log('跳转他人页面');
                                }}
                            >
                                <View style={[styles.titleStyle, { width: windowWidth - 30 }]}>
                                    <View style={styles.titleStyleLeftContainer}>
                                        <Image source={uri} style={styles.avatar} />
                                        <Text style={styles.leftStyle}>{item.nickname}</Text>
                                    </View>
                                    {userInfo._id !== item._id && (
                                        <TouchableOpacity
                                            onPress={() => navigation.navigate('SelfWork', { _id: item._id })}
                                        >
                                            <View style={styles.rightStyle}>
                                                <Text style={styles.rightTextStyle}>他的作品</Text>
                                            </View>
                                        </TouchableOpacity>
                                    )}
                                </View>
                            </TouchableOpacity>
                            <View style={styles.titleStyle}>
                                <Text style={[styles.leftStyle, styles.bottomStyle]}>{item.desc}</Text>
                                <View style={[{ width: 50, flexDirection: 'row' }]}>
                                    <Image source={hot} style={styles.imgStyle} />
                                    <Text style={styles.rightBottomTextStyle}>{item.totalSum}</Text>
                                </View>
                            </View>
                            <ScrollView
                                horizontal={true}
                                navigation={navigation}
                                showsHorizontalScrollIndicator={false}
                            >
                                {item.profile.map(imgItem => {
                                    const imgItemUri = { uri: imgItem.photos.photos[0] };
                                    return (
                                        <TouchableOpacity
                                            key={imgItem._id}
                                            onPress={() =>
                                                // navigation.navigate('FindDetail', { img: imgItem.src })
                                                navigation.navigate('FindDetail', {
                                                    img: imgItemUri,
                                                    // status: selfStatus,
                                                    _id: imgItem.photos._id,
                                                })
                                            }
                                        >
                                            <Animatable.View style={styles.img} animation="fadeInRight">
                                                <Image
                                                    source={imgItemUri}
                                                    style={{ width: '100%', height: '100%' }}
                                                />
                                            </Animatable.View>
                                        </TouchableOpacity>
                                    );
                                })}
                            </ScrollView>
                        </View>
                    </View>
                </View>
            );
        };
        return (
            <View style={styles.container}>
                <View style={{ marginLeft: 15, marginRight: 15 }}>
                    <FlatList
                        data={List}
                        renderItem={_renderItem}
                        keyExtractor={item => item._id}
                        showsVerticalScrollIndicator={false}
                    />
                </View>
            </View>
        );
    }
}
